<template>
    <div id="shoplist">
        <div class="shoplist_">
            <ul>
                <li>
                    <el-button>全部商品&nbsp;&nbsp; 34</el-button>
                </li>
                <li>
                    <el-button>雪票&nbsp;&nbsp; 18</el-button>
                </li>
                <li>
                    <el-button>教练&nbsp; &nbsp; 8</el-button>
                </li>
                <li>
                    <el-button>酒店&nbsp;&nbsp; 3</el-button>
                </li>
                <li>
                    <el-button>卡类&nbsp;&nbsp; 4</el-button>
                </li>
                <li>
                    <el-button>已上架&nbsp;&nbsp; 21</el-button>
                </li>
                <li>
                    <el-button>待上架&nbsp; &nbsp;3</el-button>
                </li>
                <li>
                    <el-button>未上架&nbsp;&nbsp; 10</el-button>
                </li>
                <li>
                    <el-button>审核中&nbsp;7</el-button>
                </li>
            </ul>

        </div>
        <div class="shoplist_table">
            <transition name="el-zoom-in-top">
                <setcard v-if="cardtf" class="shoplist_card"></setcard>
            </transition>
            <div class="shoptext">商品列表</div>
            <ul class="shop_icon">
                <transition name="el-fade-in-linear">
                    <li v-show="sousuok">
                        <el-input v-model="input1" class="sousuo"></el-input>
                    </li>
                </transition>
                <li><img @click="btnsousuo" src="../image/放大镜.png" alt=""></li>

                <li><img @click="shuaxin" alt="" src="../image/24px.png"></li>
                <li><img @click="getcard" src="../image/16px.png" alt=""></li>
            </ul>

            <div class="el_table_shop">

                <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
                    tooltip-effect="dark">


                    <el-table-column prop="date" label="商品编号" width="180">
                        <template slot-scope="scope">
                            <el-checkbox v-model="pageChecked"></el-checkbox>

                            <span style="margin-left: 2px">{{scope.row.dingdan}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" sortable label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="fenlei" label="分类">
                    </el-table-column>
                    <el-table-column prop="money" label="价格">
                    </el-table-column>
                    <el-table-column prop="zhuangtai" label="状态 ">
                        <template slot-scope="scope">

                            <span class="shop_zt" style="margin-left: 2px">{{ scope.row.zhuangtai }}</span>


                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="创建时间">
                    </el-table-column>
                    <el-table-column label="上下架">
                        <template slot-scope="scope">
                            <i class="el-icon-circle-plus
                      "></i>
                            <span style="margin-left: 2px">{{ scope.row.shangxiajia }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <i class="el-icon-edit" style=" color: #1890FF"></i>
                            <span class="caozuo" style="margin-left: 2px">{{ scope.row.caozuo }}</span>
                            <i class="el-icon-delete" style=" color: red"></i>
                            <span class="caozuo1" style="margin-left: 2px">{{ scope.row.caozuo1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="查看" width="180">
                        <el-button>数据</el-button>
                        <el-button @click="getdetailpage">详情</el-button>
                    </el-table-column>

                </el-table>

                <el-button @click="getqx">多选</el-button>

                <div class="fenye">

                    <el-pagination background layout="prev, pager, next" :total="total"
                        @current-change="current_change">
                    </el-pagination>

                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import { getlist } from "../../src/request/index"
    import setcard from "../components/Setcard.vue"
    export default {
        components: { setcard },
        data() {
            return {
                cardtf: false,
                pageChecked: true,
                input1: "",
                sousuok: false,
                tableData: [],
                multipleSelection: [],
                total: 160,
                pagesize: 9,
                currentPage: 1,
                tableData: [{
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票",
                    money: "380",
                    zhuangtai: "已上架",
                    time: "2021/2/18",
                    shangxiajia: "上架",
                    caozuo: "修改",
                    caozuo1: "删除"
                }, {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                }, {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },
                {
                    dingdan: 'XP184217',
                    name: '1小时滑雪体验票',
                    address: '',
                    fenlei: "雪票"
                },

                ],


            }
        },
        methods: {
            addUser() {
                this.$http({
                    method: 'GET',
                    url: 'http://127.0.0.1:8080/api/users',
                }).then(res => {
                    console.log(res);
                    if (!res.data.errno) {
                        this.tableData = res.data.data.users;
                        this.total = res.data.totalnum;
                    }
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            btnsousuo() {
                console.log("111111");
                this.sousuok = !this.sousuok
                this.cardtf = false
            },
            shuaxin() {
                console.log("222222");
                window.location.reload();
            },
            getdetailpage() {
                this.$router.push('/detailpage')
            },
            getcard() {
                this.sousuok = false
                this.cardtf = !this.cardtf
                let data = {
                    username: "admin",
                    password: "123456"
                }
                getlist(data).then(res => {
                    console.log(res.data);
                })
            },
            getqx() {
                this.pageChecked = !this.pageChecked
            },
            current_change: function (currentPage) {
                this.currentPage = currentPage;
            },
            mounted: function () {
                this.addUser();
                this.getcard()
            }
        }
    }
</script>
<style scoped>
    div /deep/ .el-tabs__header {
        padding: 0;
        position: relative;
        margin: 0 5px 15px;
    }






    .shop_zt {
        color: #1890FF;
    }

    .fade-enter-active,
    .fade-leave-avtive {
        transition: opacity 1.5s
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0
    }

    .shoplist_card {
        position: absolute;
        z-index: 2;
        right: 20px;
        top: 150px;
    }

    div /deep/ .el-input__inner {
        -webkit-appearance: none;
        background-color: #F2F2F2;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        /* height: 10px; */
        height: 24px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }

    div /deep/ .el-table th.el-table__cell>.cell {
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        font-weight: 700;
        color: black;
    }

    .fenye {
        position: absolute;
        right: 0;
        bottom: 60px;
    }

    .caozuo1 {
        color: red;
        cursor: pointer;
    }

    .caozuo {
        color: #1890FF;
        cursor: pointer;
    }

    div /deep/ tr.el-table__row {
        height: 56px;
    }

    .el_table_shop {
        width: 1184px;
        height: 744px;
        /* background-color: skyblue; */
        margin-left: 20px;
        position: relative;
    }

    .shop_icon {
        list-style: none;
        display: inline-block;
        float: right;
        margin-top: 20px;
        margin-right: 20px;
    }

    .shop_icon>li {
        padding: 0 5px;
        display: inline-block;
        cursor: pointer;
    }

    #shoplist {
        overflow: hidden;
    }

    .shoptext {
        font-size: 20px;
        font-weight: 700;
        margin-top: 20px;
        margin-left: 20px;
        display: inline-block;
    }

    .shoplist_table {
        width: 1232px;
        height: 750px;
        background-color: #fff;
        margin-top: 25px;
        overflow: hidden;
    }

    .shoplist_ {
        width: 1018px;
        height: 36px;
        /* background-color: pink; */
        margin-top: 40px;
        margin-left: 15px;
    }

    .shoplist_>ul {
        list-style: none;

    }

    .shoplist_>ul>li {
        float: left;
        margin-left: 10px;
    }
</style>